<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        .star-box{
            display: inline-block;
        }
        .iconfont{
            cursor: pointer;
        }
        .icon-collection-b{
            color: goldenrod;
            padding-right: 4px;
        }
        .icon-collection{
            color: #999;
            padding-right: 4px;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in sources">
                {{ item.name }}：
                <itany-star :source=" item.s " :is-readonly=" true "></itany-star>
            </li>
        </ul>
    </div>
    <hr>

    <!-- 功能不完整 ==> 修改分数会报错 -->
    <script type="text/x-template" id="star">
        <div v-if=" !isReadonly " class="star-box" @mouseout=" source=temp ">
            <span class="iconfont" 
                v-for=" item in 5 " 
                :class=" source>=item?'icon-collection-b':'icon-collection' "
                @mouseover=" setSouce(item) "
                @click=" setSourc(item) "
            ></span>
            <span>{{ source }}</span>
        </div>
        <div v-else class="star-box">
            <span class="iconfont" 
                v-for=" item in 5 " 
                :class=" source>=item?'icon-collection-b':'icon-collection' "
            ></span>
            <span>{{ source }}</span>
        </div>
    </script>

    <script>
        Vue.component("itany-star", Vue.extend({
            template:"#star",
            data(){
                return {
                    // source:0,
                    temp:0
                }
            },
            props:["source","isReadonly"],
            methods: {
                setSouce(nv){
                    this.source = nv;
                },
                setSourc(nv){
                    this.temp = nv;
                }
            }
        }) )

        new Vue({
            el:"#app",
            data:{
                sources:[
                    { name:"服务评价",s:3 },
                    { name:"物流评价",s:2 },
                    { name:"商品评价",s:4 }
                ]
            }
        })
    </script>
</body>
</html>